import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table,Button,TreeSelect, message, Popconfirm,Row,Col,} from 'antd';
var _this,_props,_state;


const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

class DistributionModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        if(values.assetId==undefined||values.assetId==null){
           message.error("请选择所要分配的资产");
           return;
        }
        onOk(values);
      }
     });
  };

  render() {
    const { children, dispatch,deptTree,assetType,assetList,detailList,item,roomList,assetBrandList,userList,addDetailHandler,assetCurrent,assetCurrentSize,assetTotal} = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 20 },
    };
    const formItemLayout2 = {
      labelCol: { span: 2 },
      wrapperCol: { span: 18 },
    };
    const onAddDetail = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
            dispatch({
              type: 'distribution/showSecondAndAsset',
              payload:{typeId:item.typeId_,searchStatusType:1},
            })
         }
       });
     }

    const columns = [{
        fixed: 'left',
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 150
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 120
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 150
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 120,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 150,
      },{
        title: 'RFID编码',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 70,
        render: (value, row, index) => {
          return (
            value == 1 ? "在库" : value == 2 ? "已上架" : value == 3 ? "已报废" :''
          )
        }
      },{
        title: '所在位置',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 120,
      },{
        title: '起始U位',
        dataIndex: 'startU',
        key: 'startU',
        width: 60,
      },{
        title: '购置时间',
        dataIndex: 'buyTime',
        key: 'buyTime',
        width: 120,
      },{
        title: '维保结束日期',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 120,
      }];

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                zIndex={100}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{backgroundColor:'#fff'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px', marginTop:'-16px'}}>
                <Form layout={'inline'} style={{marginTop: '0px'}} onSubmit={this.okHandler}>
                   <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('assetId',{initialValue:detailList[0]!=null?detailList[0].id_:undefined})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('id',{initialValue:item.id_})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>

                    <Row gutter={16}>
                      <Col span={8} style={{paddingRight:'2px'}}>
                        <FormItem
                            label="申请单号"
                          >
                          {
                            getFieldDecorator('usingApplyId', {
                              initialValue: item.usingApplyId_,
                            })(<Input style={{ width: '234px' }} />)
                          }
                        </FormItem>
                      </Col>
                      <Col span={8} style={{paddingRight:'2px'}}>
                        <FormItem
                              label="领用部门"
                            >
                            {
                              getFieldDecorator('branchName', {
                                initialValue: item.branchName,

                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                      <Col span={8} style={{paddingRight:'2px'}}>
                        <FormItem
                              label="领用人"
                            >
                            {
                              getFieldDecorator('userName', {
                                initialValue: item.userName,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                     </Row>
                     <Row gutter={16} style={{marginTop:'20px'}}>
                       <Col span={8} style={{paddingRight:'2px'}}>
                          <FormItem
                              label="资产分类"
                            >
                            {
                              getFieldDecorator('typeName', {
                                initialValue: item.typeName,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                       <Col span={8} style={{paddingRight:'2px'}}>
                          <FormItem
                              label="申请时间"
                            >
                            {
                              getFieldDecorator('createTime', {
                                initialValue: item.createTime,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                    </Row>

                    <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                        <FormItem
                            label="申请备注"
                        >
                          {
                            getFieldDecorator('desc', {
                              initialValue: item.desc,
                            })(<Input readOnly="readonly" type="textarea" autosize={{ minRows: 3, maxRows: 3 }} style={{ width: '870px' }}/>)
                          }
                         </FormItem>
                      </Col>
                    </Row>

                    <Row style={{marginTop:'15px'}}>
                     <Col span={24}>
                     <hr style={{width:'930px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                     </Col>
                    </Row>

                    <Row>
                      <Col span={24}>
                         <div style={{width:'100%',marginTop:'15px',marginBottom:'10px',textAlign:'right',paddingRight:'10px'}}>
                          <FormItem>
                            {/* <SecondDistributionModal title="分配" record={{}} dispatch={dispatch}  assetCurrent={assetCurrent} assetCurrentSize={assetCurrentSize} assetTotal={assetTotal} roomList={roomList} assetList={assetList} assetBrandList={assetBrandList} typeId={item.typeId_} onOk={addDetailHandler}> */}
                              <Button type="primary" onClick={onAddDetail} size='large' >分配</Button>
                            {/* </SecondDistributionModal> */}
                          </FormItem>
                        </div>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={24}>
                        <div style={{width:'100%',padding:"10px 20px 20px",}}>
                            <Table columns={columns}
                                rowKey={record => record.id_}
                                dataSource={detailList}
                                pagination={false}
                                scroll={{ x: 1820 }}
                            />
                        </div>
                      </Col>
                    </Row>
                    <Row style={{}}>
                      <Col span={24}>
                        <FormItem
                            label="分配信息"
                            hasFeedback
                        >
                          {
                            getFieldDecorator('remark', {
                              rules: [
                                { type: 'string', max: 200, message: '最多200个字符' }
                              ],
                            })(<Input type="textarea" autosize={{ minRows: 3, maxRows: 3 }} style={{ width: '869px' }}/>)
                          }
                         </FormItem>
                      </Col>
                    </Row>
                </Form>
            </div>

            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(DistributionModal)
